<div class="row animate fadeIn">
    <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Add</i></h5>
        <div class="ibox-tools">    
             <button class="btn btn-primary btn-sm save-btn-tab" id="save_im_cat_btn">Save</button>
             <a id="cancel_add" class="btn btn-sm btn-outline btn-info cancel-btn-tab">Cancel</a>
             <a id="complete_btn" class="btn btn-sm btn-outline btn-success cancel-btn-tab">Done</a>
        </div>
     </div>
     <div class="ibox-content">
      <form class="form-horizontal" id="im_category_form">
        <div class="form-group">
          <label class="col-lg-4 control-label">Category Code</label>
            <div class="col-lg-4">
              <input type="text" name="category_code" class="form-control">
            </div>
        </div>
        <div class="form-group">
          <label class="col-lg-4 control-label">Category Name</label>
            <div class="col-lg-4">
              <input type="text" name="category_name" class="form-control">
            </div>
        </div>
        <div class="form-group">
          <label class="col-lg-4 control-label">Description</label>
            <div class="col-lg-4">
              <input type="text" name="description" class="form-control">
            </div>
        </div>
        <div class="form-group">
          <label class="col-lg-4 control-label">Default Department</label>
            <div class="col-lg-4">
              <select name="default_department" class="form-control chosen">
                <option value="">--</option>
                <?php foreach($department as $dep): ?>
                <option value="<?php echo $dep->lookup_code; ?>"><?php echo $dep->meaning; ?></option>
                <?php endforeach; ?>
              </select>
            </div>
        </div>
        <div class="form-group">
          <label class="col-lg-4 control-label">Default Assign</label>
            <div class="col-lg-4">
              <select name="default_assign_to" class="form-control chosen">
                <option value="">--</option>
              </select>
            </div>
        </div>
      </form>
      <button class="btn btn-primary btn-sm" style="display: none;" id="add_sub_cat_btn">Add Subcategory</button>
    </div>
    <div class="ibox-content" id="sub_category_tbl" style="display: none;">
      <table class="table table-hovered">
        <thead>
            <tr>
                <th>Category Code</th>
                <th>Category Name</th>
                <th>Default Department</th>
                <th>Default Assign To</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="sub_category_tbl_body">
        </tbody>
      </table>
    </div>
 </div>
 <div class="modal inmodal in" id="sub_cat_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
              <form method="post" class="form-horizontal" id="sub_cat_add_form">
              <input type="hidden" value="" name="category_id">
                <div class="form-group">
                  <label class="col-lg-4 control-label">Sub Category Code</label>
                    <div class="col-lg-5">
                      <input type="text" name="sub_category_code" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-4 control-label">Sub Category Name</label>
                    <div class="col-lg-5">
                      <input type="text" name="sub_category_name" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-4 control-label">Description</label>
                    <div class="col-lg-5">
                      <input type="text" name="description" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-4 control-label">Default Department</label>
                    <div class="col-lg-5">
                      <select name="default_department" class="form-control chosen">
                        <option value="">--</option>
                        <?php foreach($department as $as): ?>
                        <option value="<?php echo $as->lookup_code; ?>"><?php echo $as->meaning; ?></option>
                        <?php endforeach; ?>
                      </select>
                    </div>
                </div>
                <div class="form-group" id="">
                  <label class="col-lg-4 control-label">Assign To</label>
                    <div class="col-lg-5">
                      <select name="default_assign_to" class="form-control chosen">
                        <option value="">--</option>
                      </select>
                    </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                <button type="button" id="save_sub_cat_btn" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
 <script>
    $(document).ready(function(){
            $('#complete_btn').hide();
            $('textarea').val('');
            $('.input-group.date').datepicker({
                todayBtn: "linked",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true
            });

            $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
            });

            $('select').chosen({width : "100%"});

            $('#im_category_form').validate({
                 rules: {
                     category_code: {
                        required: true
                     },
                     category_name: {
                        required: true
                     }
                 }
            });
            $('#sub_cat_add_form').validate({
                 rules: {
                     sub_category_code: {
                        required: true
                     },
                     sub_category_name: {
                        required: true
                     }
                 }
            });

            $('#add_sub_cat_btn').click(function(){
              $('#sub_cat_modal').modal('show');
            });

            $(document).on('change','#im_category_form select[name=default_department]',function(){
              $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax').'/get_user_by_department'); ?>",
                data: { "id" : $(this).val() },
                dataType: 'json',
                async: true,
                success: function(data){
                    var tmp = "";
                    tmp += "<option>--</option>";
                    if(data.length > 0){
                      $.each(data, function(i, item) {
                       tmp += "<option value='"+ data[i].user_id+"'>"+data[i].first_name + " " + data[i].last_name + " (" + data[i].user_name+ ")" +"</option>";
                      });
                    }
                    $('#im_category_form select[name=default_assign_to]').html(tmp);
                    $('select').trigger('chosen:updated');
                }
              });
            });

            $(document).on('change','#sub_cat_add_form select[name=default_department]',function(){
              $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax').'/get_user_by_department'); ?>",
                data: { "id" : $(this).val() },
                dataType: 'json',
                async: true,
                success: function(data){
                    var tmp = "";
                    tmp += "<option>--</option>";
                    if(data.length > 0){
                      $.each(data, function(i, item) {
                       tmp += "<option value='"+ data[i].user_id+"'>"+data[i].first_name + " " + data[i].last_name + " (" + data[i].user_name+ ")" +"</option>";
                      });
                    }
                    $('#sub_cat_add_form select[name=default_assign_to]').html(tmp);
                    $('select').trigger('chosen:updated');
                }
              });
            });

            $('#save_im_cat_btn').click(function(e){
              if($('#im_category_form').valid() == true){
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url($this->session->userdata('forajax').'/insert'); ?>",
                    data: $('#im_category_form').serialize(),
                    dataType: 'json',
                    success: function(data){
                       if(data[0].error != 1){
                          notifymsg("success","Success!");
                          $('#save_im_cat_btn').hide();
                          $('#add_sub_cat_btn').show();
                          $('#sub_category_tbl').show();
                          $('#cancel_add').hide();
                          $('#complete_btn').show();
                          $('#sub_cat_add_form input[name=category_id]').val(data[0].id);
                       }else{
                          notifymsg("danger",data[0].msg);
                       }
                    },
                    complete: function() {

                    },
                    beforeSend: function(){
                       
                    }
                });
              }
            });

            $('#save_sub_cat_btn').click(function(e){
              if($('#sub_cat_add_form').valid() == true){
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url($this->session->userdata('forajax').'/insert_sub'); ?>",
                    data: $('#sub_cat_add_form').serialize(),
                    dataType: 'json',
                    success: function(data){
                       if(data[0].error != 1){
                          notifymsg("success","Success!");
                          get_sub_category($('#sub_cat_add_form input[name=category_id]').val(),'#sub_category_tbl_body','add');
                          $('#sub_cat_modal').modal('hide');
                       }else{
                          notifymsg("danger",data[0].msg);
                       }
                    },
                    complete: function() {

                    },
                    beforeSend: function(){
                       
                    }
                });
              }
            });


            function alert_cancel(){
              if($('#uom_cn').val() != "" || $('#uom_c').val() != "" || $('#uom_n').val() != "" || $('#uom_cb').is(':checked') == false){
                  swal({
                        title: "Are you sure?",
                        text: "Your work will not be save",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Leave",
                        cancelButtonText: "Stay",
                        closeOnConfirm: true,
                        closeOnCancel: true },
                    function (isConfirm) {
                        if (isConfirm) {
                          swal("success");
                            close_add(); active_search();
                            notifymsg("hide","hide");
                        } else {
                            swal("Cancelled");
                        }
                    });
              }else{
                  close_add(); active_search();
                  notifymsg("hide","hide");
              }
            }
            $('#cancel_add').click(function(){
                alert_cancel();
            });
            $('#complete_btn').click(function(){
                close_add(); active_search();
            });

            $('#addX').click(function(){
              alert_cancel();      
            });
    });
 </script>